<div id="accounting_subject_config" class="clearfix">
	<div class="absolute fin_menu border">
		<div class="color-gray line-height-45" style="background:rgba(239,239,239,1);">账套名称</div>
		<div class="absolute" style="top: 45px;bottom: 0px;width: 100%;">
			<vue-scroll :ops="ops" style="height: 100%;">
				<ul>
					<li class="line-height-45 border-b cursor relative" @click="selectAccounting(item)"
						:class="{active: accountingSelectId == item.id}" v-for="(item, index) in accountingArr">
						{{ item.name }}
					</li>
				</ul>
			</vue-scroll>
		</div>
	</div>
	<div class="fin_add pull-right mt-10 border">
		<div class="color-gray line-height-45 pl-12 clearfix" style="background:rgba(239,239,239,1);">
			<span>会计科目</span>
			<div class="line-height-45 pull-right mr-10 cursor" @click="addItem('1')" style="color:#666">
				<span class="icon-Org-account color-primary"></span>
				新增一级科目
			</div>
		</div>
		<div class="relative">
			<div style="overflow-x: auto;">
				<div class="border mt-10 mlr-10 mb-10 line-height-40 text-center global_table"
					style="width: 150%;padding-right: 200px;">
					<div class="dy-flex color-666 font-nm color-gray global_table_title">
						<div class="">科目编码</div>
						<div class="border-l border-r">科目名称</div>
						<div class="border-l border-r">辅助核算</div>
						<div class="border-l border-r">现金流</div>
					</div>
					<div class="dy-flex border-t global_table_item" v-for="(item, index) in accountingSubjectArr">
						<div class="dy-flex" style="align-items: center ellipsis-1">
							<span :style="{'padding-left': getPd(item.deep)}" :title="item.code">{{ item.code }}</span>
						</div>
						<div class="border-l border-r dy-flex ellipsis-1" style="align-items: center;justify-content: center;">
							<span :title="item.name">{{ item.name }}</span>
						</div>
						<div class="border-l border-r relative" style="align-items: center;justify-content: center">
							<div class="ellipsis-1" :title="getArrText(item.assists)">{{ getArrText(item.assists)}}</div>
						</div>
						<div class="border-l border-r relative" style="align-items: center;justify-content: center;">
							<div class="ellipsis-1" :title="getArrText(item.cashes)">{{ getArrText(item.cashes) }}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="operationBox mt-10">
				<div class="border-l line-height-40"
					style="background-color: #f0f2ff;color: #a5aab7;border: 1px solid #e5e5e5;">操作</div>
				<div class="border-l line-height-40" v-for="(item,index) in accountingSubjectArr"
					:class="{'border-b':index<accountingSubjectArr.length - 1}">
					<a @click="addItem('2',item,index)">新增子科目</a>
					<a @click="addItem('3',item, index)">编辑</a>
					<a @click="delAccountingSubject(item.id)">删除</a>
				</div>
			</div>
		</div>

		<hl-dialog :visible="dialogFlag" :title="dialogType == '1'? '新增一级科目':(dialogType == '2'?'新建子科目':'编辑科目')"
			@on-close="dialogFlag = false">
			<div class="dy-flex">
				<div class="dy-fx-2 line-height-34 text_r">科目编码：</div>
				<div class="dy-fx-6">
					<input type="text" class="form-control" @blur="validateCodeIsNumber" @input="inputValidateCode"
						style="width: 320px;" v-model="addEditObj.code">
				</div>
			</div>
			<div class="dy-flex mt-10">
				<div class="dy-fx-2 line-height-34 text_r">科目名称：</div>
				<div class="dy-fx-6">
					<input type="text" class="form-control" style="width: 320px;" v-model="addEditObj.name">
				</div>
			</div>
			<div class="dy-flex mt-10">
				<div class="dy-fx-2 line-height-34 text_r">辅助核算：</div>
				<div class="dy-fx-6">
					<hl-select type="primary" :data="FZHSList" v-model="addEditObj.assists" :multiple="true"></hl-select>
				</div>
			</div>
			<div class="dy-flex mt-10">
				<div class="dy-fx-2 line-height-34 text_r">现金流：</div>
				<div class="dy-fx-6">
					<hl-select type="primary" :data="XJLList" v-model="addEditObj.cashes" :multiple="true"></hl-select>
				</div>
			</div>
			<div slot="footer">
				<hl-button type="primary" @on-click="saveCode">确定</hl-button>
				<hl-button type="outline" @on-click="dialogFlag = false">取消</hl-button>
			</div>
		</hl-dialog>
	</div>
</div>

<style type="text/css">
	.global_table_title>div {
		width: 25%;
	}

	.global_table_item>div {
		width: 25%;
	}

	.hl-dialog .hl-dialog__body {
		overflow: visible;
	}

	.operationBox {
		position: absolute;
		right: 0;
		top: 0;
		width: 205px;
		background: #fff;
	}

	.operationBox div {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.operationBox div a {
		margin-right: 10px;
	}

	.fin_menu {
		width: 230px;
		left: 0;
		top: 66px;
		bottom: 0;
		border-left: 0;
		text-indent: 15px;
		border-top-right-radius: 4px;
	}

	.fin_menu li:hover span {
		display: block;
	}

	.fin_menu li:hover {
		background: rgba(247, 247, 247, 1);
	}

	.fin_add {
		width: 785px;
		border-top-left-radius: 4px;
	}

	.fin_menu li.active {
		background-color: #5e67a5;
		color: #fff;
	}
</style>

<script src="modules/system_config/scripts/accounting_subject_config.js" charset="utf-8"></script>